<template>
    <div v-if="Object.keys(detailInfo).length !==0">
        <div class="info-desc">
            <div class="iconfont icon-zhuangshixian2">
            </div>
            <div class="">{{detailInfo.desc}}</div>
            <div class="iconfont icon-zhuangshixian_huaban1"></div>
        </div>
        <div v-for="(item,index) in detailInfo.detailImage" :key="index">
            <div class="info-key">{{item.key}}</div>
            <div class="info-list">
                <img v-for="(img,index2) in item.list" :key="index2" :src="img" @load="goodsLoad">
            </div>
        </div>
    </div>
</template>
desc
<script>
export default {
    props:{
        detailInfo:{
            type:Object
        }
    },
    data () {
        return {
            count:0,
            compImgLenth:0
        }
    },
    methods:{
        goodsLoad(){
            //只去给父组件发送一次 
            // 当出来的图片数和图片长度一样时发送
            if (++this.count===this.compImgLenth) {
                this.$emit('goodsImageLoad')
            }
        }
    },
    watch:{
        // watch是监测属性变化的
        detailInfo(){
            this.compImgLenth = this.detailInfo.detailImage[0].list.length
        }
    }

};
</script>

<style lang="less" scoped>
.info-desc{
    margin-top: 20px;
.desc{

}
}
.info-key{
    margin-top: 20px;
}

.info-list{
    img{
        width: 100%;
    }
}

</style>

